// JavaScript Document

OpenLayers.Control.SelectSwitcher = 
  OpenLayers.Class(OpenLayers.Control, {

    /**  
     * Property: buttonText
     * {String}
     */
    buttonText: "select",
	
	 /** 
     * Property: buttonDiv
     * {DOMElement} 
     */
    buttonDiv: null,
	
	 /** 
     * Property: itemsDiv
     * {DOMElement} 
     */
    itemsDiv: null,
	
	/** 
     * Property: containerDiv
     * {DOMElement} 
     */
    containerDiv: null,
	
	/** 
     * Property: itemsList
     * {Array} 
     */
	itemsList: null,
	
	/** 
     * Property: isVisible
     * {boolean} 
     */
	isVisible: false,
	
	/** 
     * SIZE AND POSITIONS
     */
	top: '10px',
	left: '',
	right: '13px',
	width: '84px',
	 
     initialize: function(options) {
        OpenLayers.Control.prototype.initialize.apply(this, arguments);
		this.itemsList = new Array();
    },
	
	
	/** 
     * Method: removeAllItems
	 * Elimina tods los items del menu
     *  
     */
	removeAllItems: function() {
		 if (this.itemsDiv!=null)
  		 	this.itemsDiv.innerHTML = "";
  		 this.itemsList = new Array();
	},
	 /**
     * Method: draw
     *
     * Returns:
     * {DOMElement} 
     */  
    draw: function() {
        OpenLayers.Control.prototype.draw.apply(this);

        // create layout divs
        this.loadContents();

        // populate div with current info
        //this.redraw();    

        return this.div;
    },
	
	/** 
     * Method: ignoreEvent
     * 
     * Parameters:
     * evt - {Event} 
     */
    ignoreEvent: function(evt) {
        OpenLayers.Event.stop(evt);
    },
	
	/** 
     * Method: mouseDown
     *
     * Parameters:
     * evt - {Event}
     */
    mouseDown: function(evt) {
        this.isMouseDown = true;
        this.ignoreEvent(evt);
    },

    /** 
     * Method: mouseUp
     *  
     * Parameters:
     * evt - {Event} 
     */
    mouseUp: function(evt) {
        if (this.isMouseDown) {
            this.isMouseDown = false;
            this.ignoreEvent(evt);
        }
    },

	 /** 
     * Method: loadContents
     *
     */
    loadContents: function() {

        //configure main div
        this.div.style.position = "absolute";
        this.div.style.top = this.top;
        this.div.style.right = this.right;
        this.div.style.left = this.left;  
        this.div.style.backgroundColor = "transparent";
    
        OpenLayers.Event.observe(this.div, "mouseup", 
            OpenLayers.Function.bindAsEventListener(this.mouseUp, this));
        OpenLayers.Event.observe(this.div, "click",
                      this.ignoreEvent);
        OpenLayers.Event.observe(this.div, "mousedown",
            OpenLayers.Function.bindAsEventListener(this.mouseDown, this));
        OpenLayers.Event.observe(this.div, "dblclick", this.ignoreEvent);
		
		// button div        
        this.buttonDiv = document.createElement("div");
        this.buttonDiv.id = this.id + "_buttonDiv";
        with (this.buttonDiv.style) {
		  	borderRight = "1px solid #B0B0B0";
		  	borderBottom = "1px solid #B0B0B0";
		  	paddingTop = "1px";
		  	paddingLeft = "4px";
		    textAlign = "left";
		    fontSize = "12px";
		    fontFamily = "Arial";
		    fontWeight = "Bold";
		    background = "#FFFFFF";
		    backgroundImage = "url('images/down.gif')";
		    backgroundRepeat = "no-repeat";
		    backgroundPosition = "right";
		    width = (parseInt(this.width)-4)+'px';
		    cursor = "pointer";
		}
		this.buttonDiv.innerHTML = this.buttonText;
		OpenLayers.Event.observe(this.buttonDiv, "click", 
            OpenLayers.Function.bindAsEventListener(this.changeVisibility, this)
        );
		
		//items Div  
		this.itemsDiv = document.createElement("div");
        this.itemsDiv.id = this.id + "_itemsDiv";
        with (this.itemsDiv.style) {
		  	textAlign = "left";
		    backgroundColor = "#FFFFFF";
		    borderTop = "1px solid black";
		    width = this.width;
		    height = "100%";
		    display = (this.isVisible)?"block":"none";
		}
		for (var i=0; i<this.itemsList.length; i++)
			this.itemsDiv.appendChild(this.itemsList[i]);
		
		// container Div
		this.containerDiv = document.createElement("div"); 
  		this.containerDiv.style.border = "1px solid black";
		this.containerDiv.appendChild(this.buttonDiv);
  		this.containerDiv.appendChild(this.itemsDiv);
		
		this.div.appendChild(this.containerDiv);
		
	},
	
	 /** 
     * Method: addItem
	 * Agrega un item al menu
     *  
     * Parameters:
     * itemName - {String}
	 * itemFunction - {Function}
     */
	addItem: function(itemName, itemFunction, clickMap) {
		  var itemMenu = document.createElement("div");
		  itemMenu.id = this.id + "_item"+this.itemsList.length;
  		  with (itemMenu.style){
    		backgroundColor = "#FFFFFF";
    		width = (parseInt(this.width)-4)+'px';
    		paddingLeft = "4px";
    		height = "17px";
    		cursor = "pointer";
   			textAlign = "left";
    		fontSize = "12px";
    		fontFamily = "Arial";
  			}
 		 itemMenu.onmouseover = function(){itemMenu.style.backgroundColor="#FFEEB8";};
  		 itemMenu.onmouseout = function(){itemMenu.style.backgroundColor = "#FFFFFF";};
		 var onclickfunc = function(){ eval(clickMap);
			                           this.hideMenu();
		 							   if(itemFunction!=null)
			 							//	  itemFunction();
			 							  try{
											  itemFunction(); //si es del tipo funcion
										  }
										  catch(e){
			 								  eval(itemFunction); //si es del tipo String (llamada a funcion)
										  }
		 							   	
									 }
		 OpenLayers.Event.observe(itemMenu, "click", OpenLayers.Function.bindAsEventListener(onclickfunc, this)	);
  		 itemMenu.innerHTML=itemName;
  	
		 this.itemsList.push(itemMenu);
	},
	
	/** 
     * Method: hideMenu
     * Oculta la lista de items del menu
     * 
     */
	hideMenu: function(){
		this.isVisible = false;
		this.itemsDiv.style.display = "none"; 
		this.buttonDiv.style.backgroundImage = "url('images/down.gif')"; 
	},
	
	/** 
     * Method: showMenu
     * Muestra la lista de items del menu
     * 
     */
	showMenu: function(){
		this.isVisible = true;
		this.itemsDiv.style.display = "block";
		this.buttonDiv.style.backgroundImage = "url('images/up.gif')";
	},

	/** 
     * Method: changeVisibility
     * Oculta o muestra la lista de items del menu, dependiendo del estado actual
     * 
     */
	changeVisibility: function(){
		(this.isVisible)?this.hideMenu():this.showMenu();
	},
	
	
	CLASS_NAME: "OpenLayers.Control.SelectSwitcher"

});